//创建一个路由器，并暴露出去

//1.引入路由创建器
import {createRouter,createWebHistory} from 'vue-router'
//引入需要分配路由的组件
import Home from '@/components/Home.vue'
import About from '@/components/About.vue'
import News from '@/components/News.vue'
import Detail from '@/components/Detail.vue'

//2.创建
const router  =createRouter({
    history:createWebHistory(),
    routes : [
        {
            path:"/home",
            component:Home
        },
        {
            path:"/about",
            component:About
        },
        {
            path:"/news",
            name:"xinwen",
            component:News,
            children:[
                {
                    name:"info",
                    component:Detail,
                    // 第一种写法，将路由的params参数作为props传递给路由组件
                    //path:"detail/:id/:title/:content",
                    //props:true
                    //第二种写法，可以选择传递路由的什么参数作为props传递给路由组件,比如query
                    path:"detail",
                    props(route){
                        return route.query
                    }
                    //第三种写法，对象写法，也是可以选择传递路由的什么参数作为props传递给路由组件,比如query
                    // props:{
                    //     a:100,
                    //     b:200
                    // }
                }
            ]
        }
    ]
})
//3.暴露
export default router

